<template>
  <div>
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="租户名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入租户名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="省">
          <el-select
            v-model="searchForm.prov"
            placeholder="全部"
            clearable
            @change="getCity"
          >
            <el-option
              v-for="item in regionList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select
            v-model="searchForm.city"
            placeholder="全部"
            clearable
            @change="getArea"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区">
          <el-select
            v-model="searchForm.area"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="封禁状态">
          <el-select
            v-model="searchForm.is_black"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              :key="1"
              label="封禁"
              :value="1"
            />
            <el-option
              :key="2"
              label="解封"
              :value="2"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
    </div>
    <el-table
      v-show="tableData.length > -1"
      :data="tableData"
      border
    >
      <el-table-column
        align="center"
        prop="id"
        label="ID"
        width="70"
      />
<!--      <el-table-column-->
<!--        align="center"-->
<!--        prop="name"-->
<!--        label="租户名称"-->
<!--      />-->
      <el-table-column
        align="center"
        prop="phone"
        width="120"
        label="手机号"
      />
      <el-table-column
        align="center"
        prop="prov"
        label="省"
      />
      <el-table-column
        align="center"
        prop="city"
        label="市"
      />
      <el-table-column
        align="center"
        prop="area"
        label="区"
      />
      <el-table-column
        align="center"
        prop="address"
        label="地址"
      />
      <!-- <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <el-button
            :type="scope.row.is_black == 1 ? 'danger' : 'success'"
            size="mini"
            @click="changeBlack(scope.row)"
          >{{ scope.row.is_black == 1 ? '解封': '封禁' }}</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    />
  </div>
</template>

<script>
import { getRealList, addBlack, deleteBlack } from '@/api/user'
import { getRegion } from '@/api/order'
import customPage from '@/components/customPage'
export default {
  components: { customPage },
  props: ['shopname'],
  data() {
    return {
      searchForm: {
        name: '',
        prov: '',
        city: '',
        area: ''
      },
      total: 0,
      tableData: [],
      routerName: '',

      regionList: [],
      areaList: [],
      cityList: []
    }
  },
  created() {
    // console.log('shopname1',this.$route.query.shopname)
    if (this.$route.query.shopname) {
      this.routerName = this.$route.query.shopname
    }
  },
  mounted() {
    this.getList()
    this.getProvice()
  },
  // computed: {
  //   shopname(){
  //     console.log('shopname1',this.$route.query.shopname)
  //   }
  // },
  methods: {
    changeBlack(row) {
      if (row.is_black == 1) { // 封禁状态
        deleteBlack({ id: row.id }).then(res => {
          this.$message.success('解封成功')
          this.getList()
        })
      } else {
        addBlack({ id: row.id }).then(res => {
          this.$message.success('封禁成功')
          this.getList()
        })
      }
    },
    // 获取省
    getProvice() {
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : []
        // this.areaList = res ? [...res[0].sub] : []
        // const index = this.areaList.findIndex(k => k.id == 7459)
        // this.areaList.splice(index, 1)
      })
    },
    // 获取市
    getCity(prov) {
      // debugger
      // this.searchForm.prov = prov.name
      const index = this.regionList.findIndex(k => k.name == prov)
      this.cityList = this.regionList[index].sub// prov ? prov.sub : []
    },
    // 获取地区
    getArea(city) {
      // debugger
      // this.searchForm.city = city.name
      const index = this.cityList.findIndex(k => k.name == city)
      this.areaList = this.cityList[index].sub// city ? city.sub : []
    },
    handleMore(command, item) {
      console.log(command, item)
      // this.selectedItem = item;
      if (command == 'edit') {
        // 编辑资料
        this.$router.push({ name: 'supplierView', params: { viewId: item.id, toEdit: true }})
      } else {
        // 查看备注
      }
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        name: '',
        prov: '',
        city: '',
        area: ''
      }
      this.routerName = ''
      this.getList()
    },
    // 启用/禁用
    // enable(id, endisable) {
    //   editSupplier({
    //     id,
    //     endisable: endisable == 1 ? 2 : 1
    //   }).then(res => {
    //     this.getList(true)
    //   })
    // },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      if (this.searchForm.prov == '全国') {
        this.searchForm.prov = ''
      }
      // this.searchForm.shopname = this.searchForm.shopname || this.routerName
      getRealList({ page, pageSize, ...this.searchForm }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'supplierView') {
      next(vm => {
        vm.getList()
      })
    } else {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
